<template>
  <div>
    <van-nav-bar
      title="AI上报市容顽症事件"
      left-text=""
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
    />
    <div class="title">事件详情</div>
    <div id="gdmap"></div>
    <van-cell-group>
      <van-cell title="事件类型" :value="list.eventType" />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="发生时间" :value="list.createTime" />
    </van-cell-group>
    <van-cell-group>
      <van-cell title="发送AI探头" :value="list.channelAlias" />
    </van-cell-group>
    <van-cell-group>
      <van-cell title="所属网格" :value="list.ownerGrid" />
    </van-cell-group>
    <van-cell-group>
      <van-cell title="AI照片" icon="photo-o" />
      <div
        class="vimg"
        v-for="(item, index) in list.imageUrl"
        :key="index"
        @click="vimghandle(item)"
      >
        <van-image width="100" height="100" :src="item" />
      </div>
    </van-cell-group>
    <div class="fullimg" v-show="fullimgshow" @click="fullimghandle">
      <img :src="fullimgurl" />
    </div>
    <div class="reportBtn">
      <van-button
        round
        type="info"
        color="linear-gradient(90deg, #00C4C6 0%, #01DC8E 100%)"
        @click="suchandle"
        >情况属实</van-button
      >
      <van-button
        round
        type="info"
        color="linear-gradient(90deg, #F57665 0%, #FF8F43 100%)"
        @click="errhandle"
        >情况有误</van-button
      >
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant';
import { updateStatus,aiLoad } from '../../../utils/api'
 export default {
  name: "manualReport",
  data() {
    return {
      // typevalue: "垃圾溢满",
      // currentDate: "2021-04-23 13:24:45",
      // address: "大吉路01号",
      // gridvalue: "0702网格",
      // pic: [
      //   "https://img01.yzcdn.cn/vant/cat.jpeg",
      //   "https://img01.yzcdn.cn/vant/cat.jpeg",
      // ],
      list:{},
      fullimgshow: false,
      fullimgurl: "",
    };
  },
  mounted() {
    if(this.$route.params.lists){
      aiLoad({id:this.$route.params.lists}).then(res=>{
        if(res.code === 200){
          this.list = res.data;
          this.list.eventType = this.list.eventType == '0'?'建筑垃圾偷倒': this.list.eventType == '1'?'小包垃圾丢弃':'垃圾溢满';
          this.list.imageUrl = this.list.imageUrl.split(';');
        }else{
          Toast.fail(res.message)
        }
      })
      // this.list = this.$route.params.lists
      // this.list.eventType = this.list.eventType == '0'?'建筑垃圾偷倒': this.list.eventType == '1'?'小包垃圾丢弃':'垃圾溢满';
      // this.list.imageUrl = this.list.imageUrl.split(';');
    }
    this.map = new AMap.Map("gdmap", {
      zoom: 15,
      // center: [121.489658, 31.22478],
       center: [121.483793,31.219014],
    });
    let me = this;
    this.map.on("click", function (e) {
      me.regeoCode(e.lnglat);
    });
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/eventDiscoveryMain/eventAIlist" });
    },
    typeSelect(value) {
      this.typevalue = value.name;
      this.typeshow = false;
    },
    gridSelect(value) {
      this.gridvalue = value.name;
      this.gridshow = false;
    },
    timeConfirm(date) {
      this.currentDate = `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDate()}`;
      this.timeshow = false;
    },
    addresshandle() {
      this.showArea = true;
      setTimeout(() => {});
    },
    regeoCode(lnglat) {
      let marker = new AMap.Marker();
      let geocoder = new AMap.Geocoder({
        city: "021", //城市设为上海，默认：“全国”
        radius: 1000, //范围，默认：500
      });
      this.map.add(marker);
      marker.setPosition(lnglat);
      let me = this;
      geocoder.getAddress(lnglat, function (status, result) {
        if (status === "complete" && result.regeocode) {
          me.address = result.regeocode.formattedAddress;
        } else {
          log.error("根据经纬度查询地址失败");
        }
      });
    },
    suchandle() {
      // this.$router.push({ path: "/eventDiscoveryMain/AIInforconfirm" });

      this.$router.push({name:'AIInforconfirm',params: {lists:this.list}});
    },
    errhandle() {
      let that = this;
      Dialog.confirm({
        message: "确认当前事件为误报？",
        theme: "round-button",
      }).then(() => {

        updateStatus({id:that.list.id,eventStatus:'0'}).then(res=>{
          if(res.code === 200){
            Toast.success(res.message)
          }else{
            Toast.fail(res.message)
          }
        })
         this.$router.push({ path: "/eventDiscoveryMain/errAIevent" });
      });
    },
    vimghandle(item) {
      this.fullimgshow = true;
      this.fullimgurl = item;
    },
    fullimghandle() {
      this.fullimgshow = false;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  width: 100%;
  height: 35px;
  line-height: 35px;
  background: #daf4f1;
  color: #04bfac;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2px;
  margin-top: 46px;
}
#gdmap {
  width: 100%;
  height: 300px;
  margin-bottom: 10px;
}
.vimg {
  padding: 3px 0px;
  margin-left: 10px;
  box-sizing: border-box;
  display: inline-block;
}
.fullimg {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1;
}
.fullimg img {
  width: 100%;
  object-fit: contain;
  height: 100%;
}
.reportBtn {
  width: 90%;
  margin: 20px auto;
  display: flex;
  justify-content: space-around;
}
.reportBtn button {
  width: 45%;
}
.cancel {
  width: 30px;
  height: 35px;
  line-height: 40px;
  margin: auto;
  text-align: center;
  color: #ff8f43;
  border-bottom: 2px #ff8f43 solid;
}
</style>
